<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="设备类型" prop="device_type">
        <el-select v-model="form.device_type " placeholder="请选择设备类型">
          <!--          <el-option label="请选择" value="-1" />-->
          <el-option label="注册机" value="0" />
          <el-option label="柱状考勤机" value="1" />
          <el-option label="4G平板考勤机" value="2" />
          <el-option label="测温平板" value="3" />
          <el-option label="普通平板" value="4" />
          <el-option label="海思平板" value="5" />
          <el-option label="老版平板" value="6" />
          <el-option label="路由器" value="8" />
          <el-option label="数据卡" value="7" />
          <el-option label="其他" value="9" />

        </el-select>
      </el-form-item>
      <el-form-item label="设备编码" prop="mac">
        <el-input v-model="form.mac" style="width: 46%" />
      </el-form-item>

      <el-form-item label="入库时间">
        <el-col :span="11">
          <el-date-picker v-model="form.date1" type="date" placeholder="请选择一个时间" value-format="timestamp" style="width: 100%;" />
        </el-col>
        <!--        <el-col :span="2" class="line">-</el-col>-->
        <!--        <el-col :span="11">-->
        <!--          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" />-->
        <!--        </el-col>-->
      </el-form-item>
      <el-form-item label="设备正常">
        <el-switch
          v-model="form.delivery"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
      <!--            <el-form-item label="设备状态">-->
      <!--              <el-checkbox-group v-model="form.type">-->
      <!--                <el-checkbox label="Online activities" name="type" />-->
      <!--                <el-checkbox label="Promotion activities" name="type" />-->
      <!--                <el-checkbox label="Offline activities" name="type" />-->
      <!--                <el-checkbox label="Simple brand exposure" name="type" />-->
      <!--              </el-checkbox-group>-->

      <!--              0：停用1：启用2：维修中-->

      <!--            </el-form-item>-->
      <el-form-item label="设备归属信息">
        <el-radio-group v-model="form.resource">
          <el-radio label="1">农商银行</el-radio>
          <el-radio label="2">邮储银行</el-radio>
          <el-radio label="3">工商银行</el-radio>
          <el-radio label="4">中国银行</el-radio>
          <el-radio label="5">兴业银行</el-radio>
          <el-radio label="6">恒丰银行</el-radio>
          <el-radio label="7">东营银行</el-radio>
          <el-radio label="0">企业自购所有</el-radio>
          <el-radio label="8">库存中</el-radio>
          <el-radio label="9">其他</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="设备备注信息">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">提交</el-button>
        <el-button @click="onCancel('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { submitDeviceInfo } from '@/api/device'
export default {
  data() {
    return {
      form: {
        delivery: true,
        device_mac: '',
        device_type: '',
        // region: '',
        device_uptime: '',
        // date2: '',
        device_state: '',
        // type: [],
        device_attribute: '',
        device_desc: ''
      },
      rules: {
        device_type: [
          { required: true, message: '请选择设备类型', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        mac: [
          { required: true, message: '请输入设备编码', trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    onSubmit(form) {
      // 获取表单信息
      // var name = this.form.name;
      // var region = this.form.region;
      var date1 = this.form.date1// 设备入库时间
      // var date2 = this.form.date2;
      var device_attribute = this.form.resource// 设备归属信息
      var device_desc = this.form.desc// 设备备注信息
      var device_state = this.form.delivery// 设备是否停用
      var device_type = this.form.device_type// 设备类型
      var device_mac = this.form.mac// 设备编码

      this.$refs[form].validate((valid) => {
        if (valid) {
          submitDeviceInfo(
            {
              device_mac: device_mac,
              device_uptime: date1,
              device_attribute: device_attribute,
              device_type: device_type,
              device_state: device_state,
              device_desc: device_desc
            }).then((res) => {
            if (res.code == '20000') {
              this.$message('提交成功!')
            } else {
              this.$message({
                message: '提交失败，请联系管理员!',
                type: 'error'
              })
            }
          })
        } else {
          this.$message('请填完整后再提交!')
          console.log('error submit!!')
          return false
        }
      })
      //

      /* json格式提交： */
      // let formData = JSON.stringify(this.formMess);

      // /* formData格式提交： */
      // let formData = new FormData();
      // for(var key in this.formMess){
      //   formData.append(key,this.formMess[key]);
      // }
      //
      // axios({
      //   method:"post",
      //   url:"http://123.56.55.42/admin/index/getinfo",
      //   headers: {
      //     "Content-Type": "multipart/form-data"
      //   },
      //   withCredentials:true,
      //   data:formData
      // }).then((res)=>{
      //   console.log(res);
      // });
    },

    onCancel(form) {
      this.$message({
        message: '数据已清空!',
        type: 'warning'
      })
      this.$refs[form].resetFields()
    }
  }
}
</script>

<style scoped>
  .line{
    text-align: center;
  }
</style>

